<template>

  <scroll-view scroll-y class="my" :style="{paddingTop:pagePaddingTop}">

    <!-- 区域1 -->
    <view class="flex flex-ver flex-sb mb50">
      <view class="flex flex-ver color-white" @click="goMenuPage('/pages/users_purchasing/user_info/index')">
        <image :src="userAvatar" class="us-avatar mr20"></image>
        <view>
          <view class="fs37 fwb mb14">{{ nickname }}</view>
          <view class="fs25">账号：{{ username }}</view>
        </view>
      </view>
      <view class="top-btn-wrapper flex flex-center" @click="goMenuPage('/pages/setting/setting')">
        <view class="mr6 main-color fs27">设置</view>
        <!-- <image class="top-img" :src="staticImage.turn"></image> -->
      </view>
    </view>

    <view v-if="isLogin">
      <view class="blue-bg"></view>
      <!-- 区域2 -->
      <view class="info-area main-color flex flex-sb">
        <view class="yesterday w-50 " @click="goMenuPage('/pages/users_purchasing/user_integral_yesterday/index')">
          <view class="fs29 black-color fwb mb40">昨日积分</view>
          <view class="integral mb30">{{ $common.parseFloatFixed(info.yesterday) }}</view>
        </view>

        <view class="pt37 w-60">
          <view class="flex flex-ver mb50 mt30">
            <view class="fwb w-100 contents" @click="goMenuPage('/pages/users_purchasing/user_integral_accumulate/index')">
              <view class="fs29 black-color">累计积分</view>
              <view class="fs33 fwb ac" style="width:62%;">{{ $common.parseFloatFixed(info.all) }}</view>
            </view>
          </view>

          <view class="flex flex-ver">
            <view class="fwb contents" @click="goMenuPage('/pages/users_purchasing/user_integral_month/index')">
              <view class="fs29 black-color">本月积分</view>
              <view class="fs33 fwb ac" style="width:62%;">{{ $common.parseFloatFixed(info.month) }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 区域3 -->
      <view class="user-has-count-area color-white fs27 flex flex-sb">
        <view class="water-detail flex flex-ver w-50">
          <view class="fwb ac w-100" @click="goMenuPage('/pages/machine/index')">
            <view class="mb10">水机数量</view>
            <view class="fs29">{{ waterMachinesCount }}</view>
          </view>
        </view>
        <view class="water-score flex flex-ver w-50 ">
          <view class="fwb ac w-100 " @click="goMenuPage('/pages/users_purchasing/user_extract/index')">
            <view class="mb10">账户积分</view>
            <view class="fs29">{{ scoreCount }}</view>
          </view>
        </view>
      </view>
      <!-- 区域4 -->
      <view class="mt18 opt-area flex flex-sb flex-wrap">
        <view class="it flex flex-ver" v-for="(item,index) in optList" :key="index" @click="optClick(item)">
          <image :src="item.icon" class="mr16" ></image>
          <view >
            <view class="fs29">{{ item.title }}</view>
            <view class="fs25 name-color">{{ item.content }}</view>
          </view>
        </view>
      </view>
    </view>

    <!--    <custom-tab-bar :selected="4" />-->
    <myTabbar :jumpType="currentIndex"></myTabbar>
  </scroll-view>
</template>

<script>
import {
  getUserInfo
} from '@/api/user.js';
import {mapGetters} from 'vuex';
import {toLogin} from '@/libs/login.js';
import myTabbar from '@/components/tabBar/myTabbar.vue'
import {vipInfo} from '@/api/user/vips'
import {userScoreStatistics, getScoresumLists} from '@/api/user/userScore'
import {apparatusCount} from '@/api/apparatus'

export default {
  computed: mapGetters(['isLogin']),
  components: {
    myTabbar
  },
  data() {
    return {
      currentIndex: 'user',
      vipInfo: {},
      waterMachinesCount: 0,
      scoreCount: 0,
      level: 1, //1 普通 2白银 3 黄金
      backIcon: this.$common.imgUrl() + '/img/back.png',
      userAvatar: '/static/avatar.png',
      nickname: '用户名称',
      username: 'xxxxxx',
      info: {},
      pagePaddingTop: 0,
      optList: [
        {
          title: '邀请码',
          content: '邀请好友赚收益',
          icon: this.$common.imgUrl() + '/images/member/invitationCodeIcon.png',
          url: '/pages/users_purchasing/user_spread_code/index',
          is_check: 0
        },
        // {
        //   title: '邀请详情',
        //   content: '我邀请的好友',
        //   icon: this.$common.imgUrl() + '/images/member/invitationDetailnon.png',
        //   url: '/pages/users_purchasing/user_spread_code_info/index',
        //   is_check: 1
        // },
        {
          title: '管理设备',
          content: '我邀请的设备',
          icon: this.$common.imgUrl() + '/images/member/invitationEquipmentIcon.png',
          url: '/pages/users_purchasing/user_spread_device/index',
          is_check: 0
        },
        // {
        //   title: '邀请人收益',
        //   content: '邀请设备收益',
        //   icon: this.$common.imgUrl() + '/images/member/invitationProfitIcon.png',
        //   url: '/pages/users_purchasing/user_spread_device_profit/index',
        //   is_check: 1
        // },
        {
          title: '本月排行榜',
          content: '每月1号0点更新',
          icon: this.$common.imgUrl() + '/images/member/mbsIcon.png',
          url: '/pages/users_purchasing/user_month_top/index',
          is_check: 1
        },
        {
          title: '累积排行榜',
          content: '累积收益排行榜',
          icon: this.$common.imgUrl() + '/images/member/rankingIcon.png',
          url: '',
          is_check: 1
        },
      ],
      setStatic: {
        title: "批发商",
        turn: this.$common.imgUrl() + '/images/member/zyIcon.png',
      }
    }
  },
  async onLoad(query) {
    // if (!this.isLogin) return toLogin();
    // this.getUserInfo();
    // let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    // this.pagePaddingTop = menuButtonInfo.top + menuButtonInfo.height + 'px';
    // await this.getInfo();
    // await this.apparatusCount();
    // // await this.ScoreCount();
    // console.log("我的信息")
  },
  async onShow() {
    if (!this.isLogin) return toLogin();
    this.getUserInfo();
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.pagePaddingTop = menuButtonInfo.top + menuButtonInfo.height + 'px';
    await this.getInfo();
    await this.apparatusCount();
    // await this.ScoreCount();
    console.log("我的信息")
  },
  mounted() {
  },
  methods: {
    goMenuPage(url) {
      console.log(url)
      uni.navigateTo({
        url: url,
        fail(err) {
          // uni.switchTab({
          //   url: url
          // })
        }
      })
    },
    /**
     * 获取个人用户信息
     */
    getUserInfo: function () {
      let that = this;
      getUserInfo().then(res => {
        let tel = res.data.mobile;
        let phone = tel.substr(0, 3) + "****" + tel.substr(7);
        // that.$set(that, 'userInfo', res.data);
        that.nickname = res.data.nickname;
        that.username = phone;
        that.scoreCount = (res.data.integral ?? 0);
      });
    },
    optClick(row) {
      this.goMenuPage(row.url);
      if (row.is_check == 1) {
        return this.$utils.Tips({
          title: '当前功能暂未开通'
        });

      } else {

      }
    },
    async getVipInfo() {
      vipInfo().then(res => {
        this.vipInfo = res.data;
      })
    },
    getPhoneNumber(e) {
      console.log('getPhoneNumber');
      console.log(e);
    },
    async getInfo() {
      userScoreStatistics().then(res => {
        this.info = res.data;
      })

    },
    async apparatusCount() {
      apparatusCount().then(res => {
        this.waterMachinesCount = res.data.count;
      })
    },
    async ScoreCount() {
      getScoresumLists().then(res => {
        this.scoreCount = (res.data.count).toFixed(2);
      })
    },
    // #ifdef MP
    openSubscribe: function (page) {
      uni.showLoading({
        title: '正在加载',
      })
      uni.hideLoading();
      uni.navigateTo({
        url: page,
      });
    },
    // #endif
  }
}
</script>

<style lang="scss">
// @import url();
// @import './uni.scss';
// @import '@/mixin.scss';
// @import './common/css/public.css';
.my {
  width: 100%;
  height: calc(100vh - 140rpx);
  //background: url($baseUrl + '/img/home/bg@2x.png') no-repeat center / 100% 100%;
  background: url($baseBgImage) no-repeat center / 100% 100%;
  padding: 0 30rpx 0;

  .member-area {
    background-color: #FFFFFF;
    border-radius: 14rpx;
    font-size: 26rpx;
    padding: 30rpx 40rpx;
    margin-bottom: 20rpx;
    position: relative;

    .img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .title {
      position: absolute;
      top: 20rpx;
      left: 40rpx;
    }

    .content {
      position: absolute;
      bottom: 20rpx;
      left: 40rpx;
    }
  }

  .level1 {
    background: url($baseUrl + '/img/member/01@2x.png') no-repeat center / 100% 100%;
  }

  .level2 {
    background: url($baseUrl + '/img/member/02@2x.png') no-repeat center / 100% 100%;
  }

  .back-icon {
    width: 12rpx;
    height: 21rpx;
    transform: rotate(180deg);
  }


  .top-btn-wrapper {
    width: 183rpx;
    height: 56rpx;
    line-height: 56rpx;
    text-align: center;
    background-image: linear-gradient(to right, #E8F3FD, #C9E3FD);
    border-radius: 27rpx;
  }

  .top-img {
    width: 28rpx;
    height: 20rpx;
  }

  .us-avatar {
    width: 104rpx;
    height: 104rpx;
    border-radius: 50%;
    border: 2rpx solid #fff;
  }

  .info-area {
    margin-top: -62rpx;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 408rpx;
    background: url($baseUrl + '/img/home/jifenbg@2x.png') no-repeat center / 100% 100%;
    padding: 60rpx 26rpx 20rpx 40rpx;

    .integral {
      font-size: 70rpx;
      font-weight: bold;
    }

    .integral-btn {
      width: 222rpx;
      height: 52rpx;
      line-height: 45rpx;
      text-align: center;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(61, 165, 255, 0.3);
      font-size: 27rpx;
      border-radius: 26rpx;
      border: 2rpx solid rgba(48, 159, 255, 0.5);
    }

    .inte-detail {
      width: 136rpx;
      height: 52rpx;
      line-height: 45rpx;
      text-align: center;
      font-size: 27rpx;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(61, 165, 255, 0.3);
      border-radius: 26rpx;
      border: 2px solid rgba(48, 159, 255, 0.5);
    }
  }

  .blue-bg {
    top: 20rpx;
    height: 68rpx;
    background-color: #00CFFF;
    border-top-right-radius: 22rpx;
    position: relative;
    z-index: 1;
  }

  .user-has-count-area {
    width: 100%;
    height: 170rpx;
    background: #034efd;
    border-radius: 22rpx;
    padding: 0 36rpx;
    margin-top: -60rpx;
    position: relative;
    z-index: 3;

    .water-detail {
      width: 50%;
    }

    .water-score {
      width: 50%;
    }

    .water-detail-btn {
      width: 136rpx;
      height: 52rpx;
      line-height: 52rpx;
      margin-left: 20rpx;
      text-align: center;
      background: rgba(255, 255, 255, 0.7);
      box-shadow: -3rpx 4rpx 5rpx 0rpx rgba(0, 88, 164, 0.28);
      border-radius: 26rpx;
    }
  }


  .opt-area {
    .it {
      width: 334rpx;
      height: 170rpx;
      background: #FFFFFF;
      border-radius: 22rpx;
      background-color: #fff;
      padding: 40rpx 26rpx;
      margin-bottom: 20rpx;

      image {
        width: 87rpx;
        height: 87rpx;
      }
    }
  }
}
</style>
